<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="stylesheet" type="text/css" href="css/iview.css">
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/iview.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <style type="text/css">
        .m-item{
            width: 100%;
            height: auto;
        }
        #m-list button{
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <div id="app">
        <i-layout>
            <i-header>标题</i-header>
            <i-content style="margin-top: 5px;">
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <i-col span="2"></i-col>
                    <i-col span="20">
                        <Row :gutter="16">
                            <i-col span="6">
                                <div>
                                    <a href="#" @click="show(1)"><img src="image/dmwc.jpg" class="m-item"></a>
                                </div>
                            </i-col>
                        </Row>
                    </i-col>
                    <i-col span="2"></i-col>
                </Row>
            </i-content>
            <i-footer>版权所有，违者必究。</i-footer>
        </i-layout>
        <Modal v-model="m_v" title="电视剧" :mask-closable="false" :footer-hide="true" :styles="{width: '50%'}">
            <Row>
                <i-Col span="16">
                    <video controls style="width: 100%;">
                        <source src="mv/mov_bbb.mp4" type="video/mp4">
                    </video>
                </i-Col>
                <i-Col span="8">
                    <div id="m-list" style="padding-left: 15px;">
                        <i-Button>第1集</i-Button>
                        <i-Button>第1集</i-Button>
                        <i-Button>第1集</i-Button>
                        <i-Button>第1集</i-Button>
                        <i-Button>第1集</i-Button>
                        <i-Button>第1集</i-Button>
                        <i-Button>第1集</i-Button>
                    </div>
                </i-Col>
            </Row>
        </Modal>
    </div>
    <script type="text/javascript">
        let app = new Vue({
            el: '#app',
            data: {
                m_v: false
            },
            methods: {
                show(id) {
                    this.m_v = true
                }
            }
        })
    </script>
</body>
</html>